﻿<template>
  <div class="bigdataContainer">
    <div class="bigDataWrap">
      <div class="bigDataheader">
        <h3 class="header-title"><!-- <img src="./img/logob.png" class="logoSty" alt="logo"> -->
          <span class="titleSty">互联网租赁自行车综合治理平台</span>
        </h3>
      </div>
      <!--<canvasBg></canvasBg>-->
      <div class="bigDataInner">
        <el-row style="height: 100%;padding: 0 15px;">
          <el-col :span="5" class="echartslrWrap">
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">统计当前各单车企业在平台登记投放的车辆编号数量</div>
                <div class="alltitle">备案车辆数</div>
              </el-tooltip>

              <div class="allnav" id="echart1"></div>
            </div>
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">当天企业每小时产生订单数/企业备案车辆数</div>
                <div class="alltitle">车辆周转率</div>
              </el-tooltip>
              <div class="allnav" id="echart2"></div>
            </div>
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">统计当天企业各行政区、行政街道用户骑行订单数</div>
                <div class="alltitle">骑行订单数</div>
              </el-tooltip>
              <div class="allnav" id="echart3"></div>
            </div>
          </el-col>
          <el-col :span="14" style="height: 100%;position: relative;">
            <div style="height: 74%;position: relative;text-align: center;">
              <div class="bikeButtonWrap">
                <el-radio-group v-model="mapType" @change="changeMapType()">
                  <el-radio-button label="one">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">586956</div>
                      <div class="textBikeSecond">车辆统计

                      </div>
                    </div>
                  </el-radio-button>
                  <el-radio-button label="two">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">586956</div>
                      <div class="textBikeSecond">车辆分布

                      </div>
                    </div>
                  </el-radio-button>
                  <el-radio-button label="three">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">1896</div>
                      <div class="textBikeSecond">案件分布

                      </div>
                    </div>
                  </el-radio-button>
                </el-radio-group>
              </div>
              <div class="mapMainWrap">
                <div v-show="mapType=='one'" class="imgWrap">
                  <div class="imgMapInner">
                    <div class="imgHomeWrap">
                      <img class="imgMapSty" src="./img/shenzhen.png"/>
                      <div v-for="(item,index) in bigDataPositions" :key="index"
                           @click="gotoMap(item.id,item.count)" class="areaListSty" :style="item.position">
                        <div>{{item.districtName}}</div>
                        <div>{{item.count}}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mapContainer" ref="mapContainer">
                  <div v-show="mapType=='two'||mapType=='three'" id='allmap'></div>
                  <i v-show="mapType=='two'||mapType=='three'" @click='screenfullMap'
                     class="iconfont icon-quanping2"></i>
                </div>
              </div>

              <div class="buttonbottomWrap">
                <el-radio-group v-model="enterPriseNo">
                  <el-radio-button label="one">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">全部 598695</div>
                    </div>
                  </el-radio-button>
                  <el-radio-button label="two">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">摩拜 128695</div>
                    </div>
                  </el-radio-button>
                  <el-radio-button label="three">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">OFO 85696</div>
                    </div>
                  </el-radio-button>
                  <el-radio-button label="four">
                    <div class="textBikeWrap">
                      <div class="textBikeFirst">哈啰 15896</div>
                    </div>
                  </el-radio-button>
                </el-radio-group>
              </div>
              <div class="mapBg">
                <div class="mapBg1"><img style="height: 100%;" src="./picture/lbx.png"></div>
                <div class="mapBg2"><img style="height: 100%;" src="./picture/jt.png"></div>
                <div class="mapBg3"><img style="height: 100%;" src="./picture/map.png"></div>
              </div>
            </div>
            <el-row class="echartsCwrap" :gutter="10">
              <el-col :span="12" style="height: 100%;">
                <div class="boxall" style="height: 100%;">
                  <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                    <div slot="content">累计各企业当天骑行用户数(用户去重)</div>
                    <div class="alltitle">今日骑行用户数</div>
                  </el-tooltip>
                  <div class="allnav" id="echart4"></div>
                </div>
              </el-col>
              <el-col :span="12" style="height: 100%;">
                <div class="boxall" style="height: 100%;">
                  <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                    <div slot="content">根据车辆最新上传位置进行统计街道停放车辆数量排名</div>
                    <div class="alltitle">街道停放排名前五</div>
                  </el-tooltip>
                  <div class="allnav" id="echart5"></div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="5" class="echartslrWrap">
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">统计企业当天每小时各区用户骑行车辆数量(车辆去重)</div>
                <div class="alltitle">骑行车辆</div>
              </el-tooltip>
              <div class="allnav" id="echart6"></div>
            </div>
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">统计当天各区已处理案件总数与未处理案件总数</div>
                <div class="alltitle">案件处置情况</div>
              </el-tooltip>
              <div class="allnav" id="echart7"></div>
            </div>
            <div class="boxall" style="height: 32%;">
              <el-tooltip :visible-arrow="false" class="item" effect="dark" placement="bottom-start">
                <div slot="content">统计当天各区预警总数</div>
                <div class="alltitle">各区预警统计</div>
              </el-tooltip>
              <div class="allnav" id="echart8"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import canvasBg from "./ehcarts/canvasBg.vue"
  import echarts from 'echarts'
  import "./dist/sz"
  import inMap from "inmap"
  import bigdata from "../../store/data"

  import bikeData from '../../../static/bigData/bigData.json'
  export default {
    data(){
      return {
        mapType: "one",
        enterPriseNo: "one",
        account: "",
        password: "",
        code: "",
        myChart: "",
        map: "",
        splitMapList: {other: 'pink', 13: "#f25b4a", 14: "#fddf01", 15: "green"},
        mapData: [],
        bigData: [],
        echarts_1Data: [],
        bigDataPositions: [
          {districtName: "宝安区", position: "left: 11%;top: 40%;", count: "12345", id: 4,},
          {districtName: "光明新区", position: "left: 20%;top: 18%;", count: "12345", id: 9,},
          {districtName: "南山区", position: "left: 24%;top: 56%;", count: "12345", id: 3,},
          {districtName: "龙华区", position: "left: 32%;top: 33%;", count: "12345", id: 7,},
          {districtName: "福田区", position: "left: 35%;top: 59%;", count: "12345", id: 2,},
          {districtName: "龙岗区", position: "left: 54%;top: 29%;", count: "12345", id: 5,},
          {districtName: "罗湖区", position: "left: 48%;top: 52%;", count: "12345", id: 1,},
          {districtName: "盐田区", position: "left: 60%;top: 48%;", count: "12345", id: 6,},
          {districtName: "坪山区", position: "left: 69%;top: 35%;", count: "12345", id: 8,},
          {districtName: "大鹏新区", position: "left: 79%;top: 49%;", count: "12345", id: 10,},
        ],
      }
    },
    components: {
      canvasBg
    },
    created(){
      this.mapData = bikeData.data
      /*this.axios("http://192.168.1.180:8080/bigData/bigData.json",{}).then(response => {
       this.mapData=response.data.data
       this.mapvSet()
       })*/
//      this.getEchartsData()
    },
    mounted(){

      this.echarts_1()
      this.echarts_2()
      this.echarts_3()
      this.echarts_4()
      this.echarts_5()
      this.echarts_6()
      this.echarts_7()
      this.echarts_8()
      this.changeMapType()
    },
    methods: {
      getEchartsData(){
        //echarts_1
        this.axios.post(process.env.API_HOST + '/show/registerVehicle', {})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.echarts_1Data = []
              result.result.enterpriseList.forEach(item => {
                this.echarts_1Data.push({name: item.enterpriseName, value: item.totalCount,})
              })
              this.echarts_1()
            }
          })

      },
      //全屏
      screenfullMap(){

        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapContainer);
        }
      },
      //暂时废弃
      makesz3D(){
        let geoCoordMap = {
          "深圳": [114.07, 22.62],
          "罗湖区": [114.15365, 22.569561],
          "福田区": [114.053134, 22.543838],
          "南山区": [113.97441, 22.568771],
          "盐田区": [114.292525, 22.606567],
          "坪山区": [114.375248, 22.687244],
          "宝安区": [113.862424, 22.666302],
          "龙华区": [114.039535, 22.68556],
          "光明区": [113.956823, 22.758294],
          "大鹏区": [114.482015, 22.605026],
          "龙岗区": [114.297589, 22.737808],
          "南头街道": [113.928713, 22.553116],
          "南山街道": [113.91204, 22.521337],
          "沙河街道": [113.986348, 22.545639],
          "蛇口街道": [113.942654, 22.498901],
          "招商街道": [113.907297, 22.489818],
          "粤海街道": [113.952284, 22.542168],
          "桃源街道": [113.995403, 22.59076],
          "西丽街道": [113.958149, 22.612814],

        };

        let convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };
        let myChart = this.echarts.init(document.getElementById('allmap'))
        let option = {
          backgroundColor: 'rgba(0,0,0,0)',//canvas的背景颜色
          title: {
            text: '深圳3D',
            show: false,
            x: 'left',
            top: "10",
            textStyle: {
              color: '#000',
              fontSize: 14
            }
          },
          grid: {
            top: '0%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          tooltip: {
            show: true,
            // formatter:(params)=>{
            //   let data = "测试1:"+params.name + "<br/>"+"值:"+ params.value[2]+"<br/>"+"地理坐标:[" + params.value[0]+","+params.value[1] +"]";
            //   return data;
            // },
          },

          visualMap: [{
            type: 'continuous',
            seriesIndex: 0,
            show: true,
            text: [''],
            calculable: true,
            max: 500,
            inRange: {
              color: ['green', '#eba438', '#d94d4c']
            },
            textStyle: {
              color: '#bef2ff',
              fontSize: 10
            },
            itemWidth: 10,
            itemHeight: 100,
            left: "2%",
          }, {
            min: 0,
            max: 300,
            seriesIndex: 1,
            left: 'right',
            calculable: true,
            inRange: {
              color: ['blue', 'blue', 'green', 'yellow', 'red']
            },
            textStyle: {
              color: '#fff'
            }
          }],
          geo3D: {
            map: 'shenzhen',
            roam: true,
            itemStyle: {
              color: '#1d5e98',
              opacity: 1,
              borderWidth: 0.4,
              borderColor: '#000'
            },
            label: {
              show: true,
              textStyle: {
                color: '#000047', //地图初始化区域字体颜色
                fontSize: 12,
                opacity: 1,
                backgroundColor: 'rgba(0,23,11,0)'
              },
            },
            viewControl: {
              distance: 85,
            },
            emphasis: { //当鼠标放上去  地区区域是否显示名称
              label: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                  backgroundColor: 'rgba(0,23,11,0)'
                }
              }
            },
            //shading: 'lambert',
            light: { //光照阴影
              main: {
                color: '#fff', //光照颜色
                intensity: 1.2, //光照强度
                //shadowQuality: 'high', //阴影亮度
                shadow: false, //是否显示阴影
                alpha: 55,
                beta: 10

              },
              ambient: {
                intensity: 0.3
              }
            },
          },
          series: [{
            name: '热力值',
            type: "bar3D",
            coordinateSystem: 'geo3D',
            barSize: 0.9, //柱子粗细
            shading: 'lambert',
            opacity: 1,
            bevelSize: 1,
            label: {
              show: false,
              formatter: '{b}'
            },

            data: convertData([
              {
                name: "罗湖区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "南山区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "宝安区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "光明区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "龙华区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "龙岗区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "盐田区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "大鹏区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "坪山区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "大鹏区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "福田区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "南头街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "南山街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "沙河街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "蛇口街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "招商街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "粤海街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "桃源街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "西丽街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
            ]),
          }, {
            name: 'scatter3D',
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            pointSize: 10,
            blurSize: 10,
            data: convertData([
              {
                name: "罗湖区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "南山区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "宝安区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "光明区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "龙华区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "龙岗区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "盐田区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "大鹏区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "坪山区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "大鹏区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "福田区",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "南头街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "南山街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "沙河街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "蛇口街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "招商街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "粤海街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "桃源街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
              {
                name: "西丽街道",
                value: (Math.random() * 300 + 100).toFixed(2)
              },
            ]),
          }]
        }
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });

      },
      getBigData(){
        this.map = new BMap.Map("allmap", {
          enableMapClick: false,
          minZoom: 11,
          maxZoom: 19,

        });    // 创建Map实例

        this.map.centerAndZoom(new BMap.Point(114.188283, 22.667865), 11);  // 初始化地图,设置中心点坐标和地图级别
//        this.map.addControl(new BMap.OverviewMapControl());
//        this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
//        this.map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
        this.map.enableScrollWheelZoom(); // 允许滚轮缩放
        this.map.setMapStyle({
          style: 'midnight'
        });
        this.mapvSet()
      },
      mapvSet(){
        var dataSet = new mapv.DataSet(this.mapData);
        var options = {
          splitList: this.$store.state.splitMapColors,
          size: 0.5,
          draw: 'category'
        }
        new mapv.baiduMapLayer(this.map, dataSet, options);
      },
      getBigHotData(){
        this.map = new BMap.Map("allmap", {
          enableMapClick: false,
          minZoom: 11,
          maxZoom: 19,

        });    // 创建Map实例

        this.map.centerAndZoom(new BMap.Point(114.188283, 22.667865), 11);  // 初始化地图,设置中心点坐标和地图级别
//        this.map.addControl(new BMap.OverviewMapControl());
//        this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
//        this.map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
        this.map.enableScrollWheelZoom(); // 允许滚轮缩放
        this.map.setMapStyle({
          style: 'midnight'
        });
        let data = []
        bigdata.areaHotData.forEach(item => {
          data.push({...item, time: Math.random() * 10})
        })
        var dataSet = new mapv.DataSet(data);
        var options = {
          fillStyle: 'rgba(255, 250, 0, 0.8)',
          size: 1.0,
          bigData: 'Point',
          draw: 'simple',
        }
        var mapvLayer = new mapv.baiduMapLayer(this.map, dataSet, options);

        var dataSet = new mapv.DataSet(data);
        var options = {
          fillStyle: 'rgba(255, 250, 250, 0.9)',
          size: 1.3,
          draw: 'simple',
          bigData: 'Point',
          animation: {
            stepsRange: {
              start: 0,
              end: 10
            },
            trails: 1,
            duration: 6,
          }
        }
        var mapvLayer = new mapv.baiduMapLayer(this.map, dataSet, options);
      },
      /*getBigHotData(){
       var inmap = new inMap.Map({
       id: 'allmap',
       skin: "Blueness",
       center: [114.188283, 22.667865],
       zoom: {
       value: 11,
       show: false,
       max: 18,
       min: 5
       },
       });
       var overlay = new inMap.HeatOverlay({
       style: {
       radius: 22, // 半径
       },
       data: [],
       event: {

       }
       });
       inmap.add(overlay)
       overlay.setData(bigdata.areaHotData);
       /!*overlay.on('mouseMove', function (event, layer) {
       const { offsetX, offsetY } = event;
       console.log(offsetX,offsetY);
       const value = layer.getValueAt(offsetX, offsetY);
       layer.toolTip.show(event.offsetX, event.offsetY, value);
       });*!/
       this.addPolygonsz(inmap)
       },*/
      addPolygonsz(inmap){
        var overlay1 = new inMap.PolygonEditorOverlay({
          style: {
            isEdit: false,
            point: {
              normal: {
                backgroundColor: "rgba(93,158,247,0)", // 填充颜色
                size: 6, // 半径
              },
              mouseOver: {
                //  backgroundColor: "rgba(93,158,247,1)",
                backgroundColor: "rgba(184,0,0,0)",
                // borderColor: "rgba(93,158,247,1)",
                // borderWidth: 1
              },
              selected: {
                borderWidth: 1,
                backgroundColor: "rgba(184,0,0,0)",
              }

            },
            virtualPoint: {
              normal: {
                backgroundColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 1,
                borderColor: "rgba(0,131,238, 1)",
                size: 6,
              },
              mouseOver: {
                backgroundColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 2
              },

            },
            polygon: {
              normal: {
                borderWidth: 1.5,
                backgroundColor: "rgba(0,184,255,0)"
                // backgroundColor: "rgba(0,184,255,0.3)"
              },
              mouseOver: {
                backgroundColor: "rgba(0,184,255,0)"
              }
            }
          },
          data: null,
          event: {
            onMouseClick(event) {
//              console.log('click this is Polygon');
            },
            onCreated(event) {
//              console.log('onCreate', event);
            },
            onChange(type, event) {
//              console.log('onChange', type, event);
            },
            onDelete(event) {
//              console.log('onDelete', event);
            }
          }
        });
        inmap.add(overlay1);
        overlay1.setPath({
          "geometry": {
            "type": "Polygon",
            "coordinates": [[
              [114.437113, 22.668001], [114.456111, 22.672455], [114.459333, 22.677365], [114.478057, 22.674043], [114.484145, 22.669463], [114.488079, 22.67587], [114.497753, 22.677392], [114.512787, 22.675521], [114.523497, 22.664704], [114.539986, 22.663353], [114.584889, 22.673684], [114.591871, 22.672903], [114.605863, 22.66052], [114.616552, 22.625447], [114.617273, 22.577062], [114.632745, 22.553584], [114.657761, 22.532448], [114.658294, 22.522875], [114.648815, 22.501015], [114.628574, 22.495], [114.614545, 22.486367], [114.58705, 22.462934], [114.566802, 22.433636], [114.525922, 22.420512], [114.513312, 22.420794], [114.504535, 22.423038], [114.48545, 22.437292], [114.467327, 22.474076], [114.468686, 22.546383], [114.446204, 22.56399], [114.347601, 22.569997], [114.28595, 22.568219], [114.239398, 22.54736], [114.228102, 22.559046], [114.221038, 22.561127], [114.192484, 22.557062], [114.18843, 22.562649], [114.175375, 22.562055], [114.172433, 22.564811], [114.168247, 22.558163], [114.163386, 22.557792], [114.159879, 22.544894], [114.14188, 22.545441], [114.123462, 22.53311], [114.116521, 22.538643], [114.100165, 22.540825], [114.089534, 22.534373], [114.095058, 22.52686], [114.089501, 22.51991], [114.073937, 22.519475], [114.064504, 22.50594], [114.042682, 22.509702], [114.02954, 22.505744], [114.011611, 22.512202], [114.003902, 22.510958], [113.936693, 22.465086], [113.87928, 22.434295], [113.878356, 22.34985], [113.87519, 22.328972], [113.856803, 22.278081], [113.847333, 22.271453], [113.835875, 22.243608], [113.814711, 22.290659], [113.805868, 22.339404], [113.79003, 22.36997], [113.76541, 22.397598], [113.684206, 22.456525], [113.693995, 22.460584], [113.695478, 22.467713], [113.692191, 22.520712], [113.727017, 22.525214], [113.747321, 22.537003], [113.724956, 22.645879], [113.68541, 22.728806], [113.714381, 22.727617], [113.726751, 22.733484], [113.762825, 22.733714], [113.767278, 22.742341], [113.799397, 22.761098], [113.799002, 22.775515], [113.808805, 22.78254], [113.807849, 22.790163], [113.818007, 22.78819], [113.821794, 22.791083], [113.822339, 22.79789], [113.834424, 22.798793], [113.835643, 22.803366], [113.844003, 22.804027], [113.847416, 22.81644], [113.845932, 22.825788], [113.842015, 22.828345], [113.848688, 22.839993], [113.857813, 22.843009], [113.869057, 22.84244], [113.868899, 22.839642], [113.879741, 22.843535], [113.877912, 22.852125], [113.881382, 22.850924], [113.885824, 22.860941], [113.890509, 22.85692], [113.896749, 22.862324], [113.905377, 22.861576], [113.902959, 22.857734], [113.898807, 22.860386], [113.899963, 22.853923], [113.915166, 22.845292], [113.921619, 22.847867], [113.921294, 22.844301], [113.92962, 22.849958], [113.946488, 22.844379], [113.945629, 22.83707], [113.956365, 22.83342], [113.963873, 22.826366], [113.96415, 22.821055], [113.972859, 22.822052], [113.975416, 22.81807], [113.983204, 22.816083], [113.985048, 22.812285], [113.980308, 22.808303], [113.982212, 22.803625], [113.982446, 22.807604], [113.984341, 22.804983], [113.989002, 22.808583], [113.988931, 22.805844], [113.99744, 22.806364], [114.005482, 22.781052], [114.001954, 22.776877], [114.009403, 22.769723], [114.024147, 22.766236], [114.03385, 22.772452], [114.047999, 22.768308], [114.055119, 22.773871], [114.059344, 22.768763], [114.055514, 22.762759], [114.065402, 22.759394], [114.071317, 22.761433], [114.069601, 22.755077], [114.07592, 22.754613], [114.081321, 22.7461], [114.089792, 22.754744], [114.105178, 22.753113], [114.105757, 22.741455], [114.114643, 22.734179], [114.115533, 22.728486], [114.123804, 22.729335], [114.128149, 22.723458], [114.136204, 22.72293], [114.141346, 22.718682], [114.144188, 22.722243], [114.149272, 22.72016], [114.150782, 22.707828], [114.156597, 22.705264], [114.160814, 22.695193], [114.174905, 22.685082], [114.170374, 22.670979], [114.160922, 22.675259], [114.160576, 22.666792], [114.165886, 22.672509], [114.168873, 22.667835], [114.167158, 22.663318], [114.174113, 22.668517], [114.173857, 22.663306], [114.176458, 22.665537], [114.181099, 22.6595], [114.186288, 22.66084], [114.189514, 22.670581], [114.195525, 22.674237], [114.191888, 22.674308], [114.191703, 22.678213], [114.20355, 22.688104], [114.197326, 22.693551], [114.203258, 22.694115], [114.205561, 22.700498], [114.202724, 22.716839], [114.216673, 22.722971], [114.214697, 22.735359], [114.221877, 22.742203], [114.214553, 22.751464], [114.216656, 22.75622], [114.209088, 22.759817], [114.205384, 22.77088], [114.194747, 22.768834], [114.189133, 22.770988], [114.194587, 22.776684], [114.188647, 22.782118], [114.188711, 22.777907], [114.186658, 22.778857], [114.186349, 22.785017], [114.196426, 22.791324], [114.213309, 22.795568], [114.223185, 22.814441], [114.229751, 22.816002], [114.23232, 22.820209], [114.239126, 22.812407], [114.241292, 22.799962], [114.251386, 22.797162], [114.258083, 22.787501], [114.268647, 22.789013], [114.274474, 22.798117], [114.286946, 22.804648], [114.291944, 22.816023], [114.300902, 22.813785], [114.304025, 22.808773], [114.318322, 22.80971], [114.321135, 22.806975], [114.32536, 22.813001], [114.333858, 22.811659], [114.338594, 22.817484], [114.353738, 22.81544], [114.359423, 22.812576], [114.355955, 22.805818], [114.357346, 22.795588], [114.348599, 22.78998], [114.353709, 22.783913], [114.361977, 22.782387], [114.361526, 22.771677], [114.372024, 22.773234], [114.394225, 22.763794], [114.399954, 22.767246], [114.401617, 22.781898], [114.410094, 22.78821], [114.41639, 22.784413], [114.424618, 22.76772], [114.427691, 22.767615], [114.423422, 22.764328], [114.425662, 22.760498], [114.41958, 22.758873], [114.420807, 22.748984], [114.413279, 22.737577], [114.412887, 22.73063], [114.408772, 22.731201], [114.414102, 22.717688], [114.425796, 22.720054], [114.432692, 22.706181], [114.448039, 22.703749], [114.45076, 22.698912], [114.447477, 22.688417], [114.434116, 22.682586], [114.437113, 22.668001]
            ]]
          }
        }, function () {
          console.log('setData');
        });
      },
      echarts_1() {
        //data 为模拟数据
         var data = [
         {
         name: '摩拜',
         value: 202581,
         }, {
         name: 'OFO',
         value: 125635,
         }, {
         name: '哈啰',
         value: 104585,
         }];
//        let data = this.echarts_1Data
        var myChart = this.echarts.init(document.getElementById('echart1'));
        window.addEventListener('resize', function () {
          myChart.resize();
        });
        var startColor = ['#FF8E00', '#FFCF00', '#27A1FF'];
        var borderStartColor = ['#B46708', '#B99503', '#056FBC',];

        function deepCopy (obj) {
          if (typeof obj !== 'object') {
            return obj;
          }
          var newobj = {};
          for (var attr in obj) {
            newobj[attr] = obj[attr];
          }
          return newobj;
        }

        var xData = [],
          yData = [];
        data.map((a, b) => {
          xData.push(a.name);
          yData.push(a.value);
        });

        var RealData = [];
        var borderData = [];
        data.map((item, index) => {
          var newobj = deepCopy(item);
          var newobj1 = deepCopy(item);
          RealData.push(newobj);
          borderData.push(newobj1);
        });
        RealData.map((item, index) => {
          item.itemStyle = {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: startColor[index] // 0% 处的颜色
                }, {
                  offset: 1,
                  color: startColor[index] // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
            }
          }
        });
        borderData.map((item, index) => {
          item.itemStyle = {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: borderStartColor[index] // 0% 处的颜色
                }, {
                  offset: 1,
                  color: borderStartColor[index] // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
            }
          }
        });
        let option = {
          tooltip: {
            trigger: 'item',
            //            position: ['30%', '50%'],
            confine: true,
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            show: false,
            orient: 'vertical',
            x: 'left',
            data: ['摩拜', 'OFO', '哈啰']
          },
          series: [
            // 主要展示层的
            {
              radius: ['32%', '58%'],
              center: ['50%', '50%'],
              type: 'pie',

              label: {
                normal: {
                  show: true,
                  lineHeight: 15,
                  formatter: '{b|{b}}\n{c}\n{d}%',
                  textStyle: {
                    color: '#bef2ff'
                  },
                  rich: {
                    b: {
                      color: '#FFCF00',
                      lineHeight: 18,
                      align: 'center',
                      fontSize: 14
                    },
                  }
                },
                emphasis: {
                  show: true
                },

              },
              labelLine: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              name: "单车数量",
              data: RealData
            },
            // 边框的设置
            {
              radius: ['27%', '32%'],
              center: ['50%', '50%'],
              type: 'pie',
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              animation: false,
              tooltip: {
                show: false
              },
              data: borderData
            }
          ]
        };
        myChart.setOption(option);

      },
      echarts_2() {
        let arr = [[], [], []]
        for (var i = 0; i < 24; i++) {
          arr[0].push(this.randomNum(300, 500) / 100)
          arr[1].push(this.randomNum(200, 400) / 100)
          arr[2].push(this.randomNum(100, 200) / 100)
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = this.echarts.init(document.getElementById('echart2'));

        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#dddc6b'
              }
            }
          },
          legend: {
            top: '0%',
            data: ['摩拜', 'OFO', "哈啰"],
            textStyle: {
              color: 'rgba(255,255,255,.5)',
              fontSize: '12',
            }
          },
          grid: {
            left: '10',
            top: '30',
            right: '10',
            bottom: '10',
            containLabel: true
          },

          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.2)'
              }

            },

            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

          }, {

            axisPointer: {show: false},
            axisLine: {show: false},
            position: 'bottom',
            offset: 20,

          }],

          yAxis: [{
            type: 'value',
            axisTick: {show: false},
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },

            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            }
          }],
          series: [
            {
              name: '摩拜',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {

                normal: {
                  color: '#FE8762',
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(184, 87, 68, 0.6)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(184, 87, 68, 0.1)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                }
              },
              itemStyle: {
                normal: {
                  color: '#FE8762',
                  borderColor: 'rgba(221, 220, 107, .1)',
                  borderWidth: 12
                }
              },
              data: arr[0]

            },
            {
              name: 'OFO',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {

                normal: {
                  color: '#FFE775',
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255, 231, 117, 0.6)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(255, 231, 117, 0.1)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                }
              },
              itemStyle: {
                normal: {
                  color: '#FFE775',
                  borderColor: 'rgba(221, 220, 107, .1)',
                  borderWidth: 12
                }
              },
              data: arr[1]

            },
            {
              name: '哈啰',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {

                normal: {
                  color: '#00BAFF',
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 186, 255, 0.6)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(0, 186, 255, 0.1)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                }
              },
              itemStyle: {
                normal: {
                  color: '#00BAFF',
                  borderColor: 'rgba(221, 220, 107, .1)',
                  borderWidth: 12
                }
              },
              data: arr[2]

            },
          ]

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      echarts_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.echarts.init(document.getElementById('echart3'));

        let option = {
          //  backgroundColor: '#00265f',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },

          grid: {
            left: '0%',
            top: '10px',
            right: '0%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: ['福田区', '罗湖区', '南山区', '宝安区', '龙岗区', '龙华区', '坪山区', '盐田区', '光明区', '大鹏区'],
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
              },
            },

            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              rotate: 50,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: "rgba(255,255,255,.8)",
                fontSize: '12',
              },
            },
          }],
          yAxis: [{
            type: 'value',
            axisLabel: {
              //formatter: '{value} %'
              show: true,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: '12',
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              }
            }
          }],
          series: [{
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            lineStyle: {
              normal: {
                color: '#01CBE3',
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(1, 203, 227, 0.6)'
                }, {
                  offset: 0.8,
                  color: 'rgba(1, 203, 227, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
              }
            },
            itemStyle: {
              normal: {
                color: '#01CBE3',
                borderColor: 'rgba(221, 220, 107, .1)',
                borderWidth: 12
              }
            },
            data: [22589, 38689, 35248, 92584, 15784, 12859, 65648, 48567, 68957, 78567, 48579, 80856],

          }
          ]
        };

        function refreshData (data) {
          if (!myChart) {
            return;
          }
          //更新数据
          var option = myChart.getOption();
          option.series[0].data = data;
          myChart.setOption(option);
        }

        /*setInterval(()=>{
         let arr=[]
         for(var i=0;i<10;i++){
         arr.push(this.randomNum(10000,100000))
         }
         refreshData(arr)
         },1000)*/
        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.echarts.init(document.getElementById('echart4'));
        let data = [
          {
            "order": 1,
            "stock_code": "601398",
            "stock_name": "摩拜",
            "market_capitalization": 185451
          },
          {
            "order": 2,
            "stock_code": "601857",
            "stock_name": "OFO",
            "market_capitalization": 158148
          },
          {
            "order": 3,
            "stock_code": "601288",
            "stock_name": "哈啰",
            "market_capitalization": 126620
          },
        ]
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: function (params) {
              const param = params[0];
              const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
              const suffix = '<span style="margin-left:5px;font-size:12px;">辆</span>';
              return param.name + "<br />" +
//                marker + "排名：" + (param.dataIndex+1) + "<br />" +
                marker + "数量：" + param.value + suffix;
            }
          },
          grid: {
            top: 10,
            bottom: 10,
            left: 40,
            right: 50
          },
          xAxis: {
            show: false,
            type: "value"
          },
          yAxis: {
            type: "category",
            inverse: true,
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
              fontSize: 12,
              color: "#b0c2f9"
            }
          },
          series: [{
            name: "单车企业",
            type: "bar",
            barCategoryGap: "60%",
            label: {
              show: true,
              position: "right",
              fontSize: 12,
              color: "#188df0",
              emphasis: {
                color: "#e6b600"
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 1,
                  [
                    {offset: 0, color: '#b0c2f9'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#185bff'}
                  ]
                )
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 1,
                  [
                    {offset: 0, color: '#b0c2f9'},
                    {offset: 0.7, color: '#e6b600'},
                    {offset: 1, color: '#ceac09'}
                  ]
                )
              }
            }
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        const xData = [];
        const yData = [];
        for (let i in data) {
          xData.push(data[i].market_capitalization);
          yData.push(data[i].stock_name);
        }
        myChart.setOption({
          yAxis: {
            data: yData
          },
          series: [{
            name: "市价总值排行",
            data: xData
          }]
        });
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = new echarts.init(document.getElementById('echart5'));
        let option = {
          color: ["#F06E43", "#FFE775", "#27A1FF", "#1273F8", "#9921FF"],
          title: {
            show: false,
            text: '漏斗图',
            subtext: '纯属虚构'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}%"
          },
          toolbox: {
            show: false,
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
            }
          },
          legend: {
            show: false,
            data: ['东门街道', '粤海街道', '水贝街道', '西乡街道', '盐田街道']
          },
          calculable: true,
          series: [
            {
              name: '街道停放排名',
              type: 'funnel',
              left: 20,
              top: 10,
              //x2: 80,
              bottom: 10,
              width: '50%',
              // height: {totalHeight} - y - y2,
              min: 6000,
              max: 12560,
              minSize: '20%',
              maxSize: '100%',
              sort: 'descending',
              gap: 1,
              label: {
                show: true,
                position: 'inside'
              },
              labelLine: {
                length: 40,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
                normal: {
                  borderColor: '#5A1C09',
                  borderWidth: 1,
                  // color: 各异,
                  label: {
                    formatter: "{b} : {c}",
                    position: 'right'
                  }
                }
              },
              emphasis: {
                label: {
                  fontSize: 14
                }
              },
              data: [
                {value: 12560, name: '东门街道'},
                {value: 11985, name: '粤海街道'},
                {value: 10985, name: '水贝街道'},
                {value: 9856, name: '西乡街道'},
                {value: 8059, name: '盐田街道'}
              ]
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      echarts_6() {
        let arr = [[], [], []]
        for (var i = 0; i < 24; i++) {
          arr[0].push(this.randomNum(80000, 100000))
          arr[1].push(this.randomNum(50000, 80000))
          arr[2].push(this.randomNum(10000, 30000))
        }
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.echarts.init(document.getElementById('echart6'));

        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#dddc6b'
              }
            }
          },
          legend: {
            top: '0%',
            data: ['摩拜', 'OFO', "哈啰"],
            textStyle: {
              color: 'rgba(255,255,255,.5)',
              fontSize: '12',
            }
          },
          grid: {
            left: '10',
            top: '30',
            right: '10',
            bottom: '10',
            containLabel: true
          },

          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.2)'
              }

            },

            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

          }, {

            axisPointer: {show: false},
            axisLine: {show: false},
            position: 'bottom',
            offset: 20,

          }],

          yAxis: [{
            type: 'value',
            axisTick: {show: false},
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },

            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            }
          }],
          series: [
            {
              name: '摩拜',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {

                normal: {
                  color: '#FE8762',
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(184, 87, 68, 0.6)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(184, 87, 68, 0.1)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                }
              },
              itemStyle: {
                normal: {
                  color: '#FE8762',
                  borderColor: 'rgba(221, 220, 107, .1)',
                  borderWidth: 12
                }
              },
              data: arr[0]
            },
            {
              name: 'OFO',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {

                normal: {
                  color: '#FFE775',
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255, 231, 117, 0.6)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(255, 231, 117, 0.1)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                }
              },
              itemStyle: {
                normal: {
                  color: '#FFE775',
                  borderColor: 'rgba(221, 220, 107, .1)',
                  borderWidth: 12
                }
              },
              data: arr[1]

            },
            {
              name: '哈啰',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {

                normal: {
                  color: '#00BAFF',
                  width: 2
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 186, 255, 0.6)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(0, 186, 255, 0.1)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                }
              },
              itemStyle: {
                normal: {
                  color: '#00BAFF',
                  borderColor: 'rgba(221, 220, 107, .1)',
                  borderWidth: 12
                }
              },
              data: arr[2]

            },
          ]

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      echarts_7() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.echarts.init(document.getElementById('echart7'));
        let option = {
          color: ['#F06E43', '#00EEFE'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            itemWidth: 10,
            itemHeight: 10,
            data: ['案件数', '已处理'],
            textStyle: {
              color: 'rgba(255,255,255,.5)',
              fontSize: '12',
            }
          },
          grid: {
            left: '10',
            top: '30',
            right: '10',
            bottom: '5',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['福田区', '罗湖区', '南山区', '宝安区', '龙岗区', '龙华区', '坪山区', '盐田区', '光明区', '大鹏区'],
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              rotate: 50,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: "rgba(255,255,255,.8)",
                fontSize: '12',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#1B5BBA',
              }
            }
          },
          yAxis: {
            splitLine: {show: false},
            axisLine: {
              lineStyle: {
                color: '#1B5BBA',
              }
            },
            axisLabel: {
              color: '#5EA2ED',
              interval: 0
            },
          },
          series: [
            {
              type: 'pictorialBar',
              name: '案件数',
              symbolSize: ['80%', '90%'],
              // symbolPosition: 'center',
              z: 10,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  formatter: "{c}",
                  color: "#bef2ff",
                  fontSize: 10
                }
              },
              data: [
                {
                  value: 200,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  // symbolRotate: -9,
                  // symbolPosition: 'start',
                  symbol: 'image://./static/images/bart.png',
                }, {
                  value: 280,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/bart.png',
                }, {
                  value: 491,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/bart.png',
                }, {
                  value: 669,
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/bart.png',
                }, {
                  value: 200,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  // symbolRotate: -9,
                  // symbolPosition: 'start',
                  symbol: 'image://./static/images/bart.png',
                }, {
                  value: 280,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/bart.png',
                }, {
                  value: 491,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/bart.png',
                }, {
                  value: 669,
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/bart.png',
                }, {
                  value: 200,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  // symbolRotate: -9,
                  // symbolPosition: 'start',
                  symbol: 'image://./static/images/bart.png',
                }, {
                  value: 280,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/bart.png',
                },]
            },
            {
              type: 'pictorialBar',
              name: '已处理',
              symbolSize: ['80%', '90%'],
              // symbolPosition: 'center',
              z: 10,
              label: {
                normal: {
                  show: true,
                  position: "insideTop",
                  formatter: "{c}",
                  color: "#bef2ff",
                  fontSize: 10
                }
              },
              data: [
                {
                  value: 152,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  // symbolRotate: -9,
                  // symbolPosition: 'start',
                  symbol: 'image://./static/images/barb.png',
                }, {
                  value: 180,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/barb.png',
                }, {
                  value: 291,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/barb.png',
                }, {
                  value: 369,
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/barb.png',
                }, {
                  value: 152,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  // symbolRotate: -9,
                  // symbolPosition: 'start',
                  symbol: 'image://./static/images/barb.png',
                }, {
                  value: 180,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/barb.png',
                }, {
                  value: 291,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/barb.png',
                }, {
                  value: 369,
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/barb.png',
                }, {
                  value: 152,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  // symbolRotate: -9,
                  // symbolPosition: 'start',
                  symbol: 'image://./static/images/barb.png',
                }, {
                  value: 180,
                  // symbolPosition: 'center',
                  symbolOffset: [0, -8],
                  symbol: 'image://./static/images/barb.png',
                }]
            },
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      echarts_8() {
        var data = [
          {
            name: '南山区',
            value: 589
          },
          {
            name: '宝安区',
            value: 698
          },
          {
            name: '罗湖区',
            value: 368
          },
          {
            name: '盐田区',
            value: 185
          },
          {
            name: '光明区',
            value: 98
          },
          {
            name: '大鹏区',
            value: 58
          },
          {
            name: '龙华区',
            value: 531
          },
          {
            name: '龙岗区',
            value: 652
          },
          {
            name: '坪山区',
            value: 123
          },
          {
            name: '福田区',
            value: 286
          },
        ]

        var myChart = this.echarts.init(document.getElementById('echart8'));
        window.addEventListener('resize', function () {
          myChart.resize();
        });
        var yMax = 0;
        for (var j = 0; j < data.length; j++) {
          if (yMax < data[j].value) {
            yMax = data[j].value;
          }
        }
        myChart.hideLoading();
        let option = {
          animation: true,
          tooltip: {
            show: true
          },
          visualMap: {
            min: 0,
            max: yMax,
            text: ['高', '低'],
            orient: 'horizontal',
            itemWidth: 10,
            itemHeight: 100,
            right: 0,
            bottom: 0,
            inRange: {
              color: ['#0e94eb', '#FE8762']
            },
            textStyle: {
              color: '#bef2ff'
            }
          },
          series: [
            {
              name: '数据名称',
              type: 'map',
              mapType: 'shenzhen',
              selectedMode: 'multiple',
              tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (件)'
              },
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  borderColor: '#0e94eb',
                  label: {
                    show: false
                  }
                },
                emphasis: { // 也是选中样式
                  borderWidth: 1,
                  borderColor: '#fff',
                  backgroundColor: 'red',
                  label: {
                    show: true,
                    textStyle: {
                      color: '#fff'
                    }
                  }
                }
              },
              data: data,
            }
          ]
        };

        myChart.setOption(option);
      },
      changeMapType(){
        if (this.mapType == "two") {
          this.getBigData()
        } else if (this.mapType == "three") {
          this.getBigHotData()
        }
      },
      randomNum(minNum, maxNum){
        switch (arguments.length) {
          case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
          case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
          default:
            return 0;
            break;
        }
      }
    },
    destroyed(){

    },
    watch: {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"

  .bigdataContainer
    width 100%
    height 100%
    overflow hidden
    background-color #050d3b
    .bigDataWrap
      position relative
      width 100%
      height 100%
      background: url('./img/bg1.png')
      .bigDataheader
        position: absolute;
        width 100%
        left 0;
        top 0;
        z-index 10
        overflow: hidden;
        text-align center
        .header-title
          display inline-block
          text-align: center;
          padding 0 70px
          font-size: 24px;
          font-weight: 400;
          color: #bef2ff;
          height 61px
          line-height 46px
          background: url("./img/headerBg.png") 0 0 / 100% 100% no-repeat;
          .logoSty
            display inline-block
            width 64px
            height 46px
            vertical-align middle
          .titleSty
            vertical-align middle

      .bigDataInner
        position absolute
        left 0px
        right 0px
        top 15px
        bottom 15px
        .echartslrWrap
          height: 100%;
          display: flex;
          flex-flow: column;
          justify-content: space-between;
        .echartsCwrap
          height: 25%;
          padding: 0 10px;
          position: absolute;
          left: 0px;
          bottom: 0px;
          right: 0;
          box-sizing: border-box;
        .boxall
          padding: 5px;
          box-sizing border-box
          background: url("./img/echartsbg.png") no-repeat;
          background-size: 100% 100%;
          position: relative;
          z-index: 10;
          &:hover
            background: url("./img/echartsCheck.png") no-repeat;
            background-size: 100% 100%;
            .alltitle:before
              position absolute
              content: "";
              left 20px;
              top 14px;
              height 10px
              width 13px
              background url("./img/titleCheck.png") center no-repeat
          .alltitle
            font-size: 15px;
            color: #bef2ff;
            text-align: left;
            line-height: 20px;
            margin-top 3px
            padding-left 36px
            box-sizing border-box
            &:before
              position absolute
              content: "";
              left 20px;
              top 14px;
              height 10px
              width 13px
              background url("./img/titleBg.png") center no-repeat
        .allnav
          height: calc(100% - 23px);
        #echart1
          background url("./img/pieStyle.png") center no-repeat;
          &:before
            position absolute
            content: "";
            left 0
            top 0
            right 0
            bottom 0
            background url("./img/piecenter.png") center no-repeat
        .mapMainWrap
          position absolute
          left 5px
          right 5px
          top 50px
          bottom 0px
          z-index 10
        .mapContainer
          width 100%
          height 100%
        &:hover .icon-quanping2
          position absolute
          right 10px
          top 10px
          display inline-block
          color #bef2ff
          cursor pointer
          z-index 100
        #allmap
          height 100%
          width 100%
        .imgWrap
          width 100%
          height 100%
          text-align center
          .imgMapInner
            padding-top: 55px;
            position: relative;
            height: 100%;
            .gradeClass
              position: absolute;
              right: 20px;
              top: 10px;
              color: #3975FE;
              line-height: 22px;
              font-size: 12px;
              font-weight: bold;
            .imgHomeWrap
              height: 79%;
              position: relative;
              display: inline-block;
              max-width 100%
              margin: 0 auto;
              .imgMapSty
                height: 100%;
                max-width 100%
                display: inline-block;
              .areaListSty
                display: inline-block;
                font-size: 11px;
                color: #bef2ff;
                line-height: 15px;
                position: absolute;
                cursor pointer;
        .bikeButtonWrap
          position absolute
          left 50%
          top 50px
          z-index 20
          text-align center
          display inline-block
          margin-left -275px
          .textBikeWrap
            line-height 20px
            padding-top 7px
            color #bef2ff
            .textBikeFirst
              font-size 24px
            .textBikeSecond
              font-size 13px
          .el-radio-group
            .el-radio-button
              width 165px
              height 49px
              margin 0 10px
              background: url("./img/checkbg.png") no-repeat;
              background-size: 100% 100%;
              &.is-active, &:hover
                background: url("./img/checkbga.png") no-repeat;
                background-size: 100% 100%;
                .textBikeWrap
                  color #FFCF00
              .el-radio-button__inner
                width 165px
                height 49px
                padding 0 !important
                border none
                background-color rgba(0, 0, 0, 0) !important
        .buttonbottomWrap
          position absolute
          left 0
          bottom 15px
          z-index 20
          text-align center
          width: 100%;
          .textBikeWrap
            line-height 25px
            color #bef2ff
            .textBikeFirst
              font-size 12px
          .el-radio-group
            .el-radio-button
              width 84px
              height 25px
              margin 0 10px
              background: url("./img/checkBgs.png") no-repeat;
              background-size: 100% 100%;
              &.is-active, &:hover
                background: url("./img/checkbgy.png") no-repeat;
                background-size: 100% 100%;
                .textBikeWrap
                  color #FFCF00
              .el-radio-button__inner
                width 84px
                height 25px
                padding 0 !important
                border none
                background-color rgba(0, 0, 0, 0) !important
        .mapBg {
          position: relative;
          height: 100%;
          width: 70%;
          display: inline-block;
          z-index: 9;
        }
        .mapBg1, .mapBg2, .mapBg3 {
          position: absolute;
          opacity: .5
        }
        .mapBg1 {
          height: 100%;
          z-index: 2;
          top: 0%;
          left: 4%;
          animation: myfirst2 15s infinite linear;
        }
        .mapBg2 {
          height: 90%;
          top: 5%;
          left: 8%;
          z-index: 3;
          opacity: 0.2;
          animation: myfirst 10s infinite linear;
        }
        .mapBg3 {
          height: 80%;
          top: 10%;
          left: 12%;
          z-index: 5;
        }
        @keyframes myfirst2 {
        from {transform: rotate(0deg);

  }
  to {transform: rotate(359deg);
  }
  }
  @keyframes myfirst {

  from {transform: rotate(0deg);
  }
  to {transform: rotate(-359deg);
  }
  }
</style>
